<template>
  <section class="content-view wrapper">
    <div class="local-region">
      <notify v-model="show1" content="提示内容"/>
      <notify v-model="show2" :time="3000" position="bottom" content="提示内容"/>
    </div>

    <h2 class="item-title">标签用法 (通常在局部显示时使用)</h2>
    <h-button class="button-class" type="rimless" shadow @click.native="showNotifyAtTop">Notify (top)</h-button>
    <h-button class="button-class" type="rimless" shadow @click.native="showNotifyAtBottom">Notify (bottom)</h-button>

    <h2 class="item-title">插件用法</h2>
    <h-button class="button-class purple" type="rimless" shadow @click.native="handleNotify">NotifyPlugin</h-button>
  </section>
</template>

<script>
import Vue from 'vue'
import { HButton, Notify, NotifyPlugin } from 'hippius'

Vue.use(NotifyPlugin)

export default {
  components: {
    HButton,
    Notify,
  },
  data () {
    return {
      show1: false,
      show2: false,
    }
  },
  methods: {
    // 标签用法
    showNotifyAtTop () {
      if (this.show1) return
      this.show1 = true
    },
    showNotifyAtBottom () {
      if (this.show2) return
      this.show2 = true
    },
    // 插件用法
    showNotify (ops = {}) {
      this.$notify.show({
        content: ops.content,
        position: ops.position,
        time: ops.time,
        onShow: ops.onShow,
        onHide: ops.onHide,
      })
    },
    handleNotify () {
      this.showNotify({
        content: '提示内容',
        position: 'top',
        time: 2000,
        onShow: () => {
          console.log('on-show')
        },
        onHide: () => {
          console.log('on-hide')
        },
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.wrapper {
  padding: 20px 6%;

  .button-class {
    width: 95%;
    margin: 6px 2.5%;
    font-size: 14px;
    color: cadetblue;
    border-radius: 3px;
  }

  .purple {
    color: #fff;
    background-color: #7e57c2;
    border: 1px solid #7e57c2;
  }

  .local-region {
    overflow: hidden;
    position: relative;
    height: 200px;
    background-color: #eee;
  }
}
</style>
